<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@ page pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<jsp:include page="../common/top.jsp"></jsp:include>

<jsp:include page="../common/leftmenu.jsp"></jsp:include>
<jsp:include page="../common/uploader.jsp"></jsp:include>

<style>
.table-nomargin td {
	vertical-align: middle;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-indent: 6px;
	padding: 0;
}

.widtha {
	width: 191px;
}

.table-nomargin tr {
	height: 35px;
	border-bottom: 1px solid #d5d6d7;
}

.selectc1 {
	display: none;
}

.selectcl1 {
	display: none;
}

a {
	text-decoration: none;
}

a:HOVER {
	text-decoration: underline;
}
</style>



<div class="gBox fr frCon;"
	style="float:left;margin-left:15px;width:720px;">
	<div class="box_title" style="width:720px;">
		<i class="fa fa-table"></i>事件申报
	</div>
	<div data-role="content" class="ui-content" role="main"
		style="width:720px">

		<form id="newIncidentForm" method="post"
			action="customer/help/incident/save">
			<div style="display: none">
				<input type="hidden" id="id" name="id" value="${model.id }">
			</div>
			<table class="form-table">
				<tr>
					<td class="td2" colspan="4">
						<h3>&nbsp;&nbsp;1.填写事件单信息</h3></td>
				</tr>

				<tr style="display:none">
					<td class="td1">事件类别：</td>
					<td class="td2" colspan="3"><input type="radio"
						style="border:1px #93BEE2 solid;" name="incidentType" id="type1"
						value="故障" checked="checked"><label for="type1">故障
					</label><input type="radio" name="incidentType" value="问询" id="type2"
						style="border:1px #93BEE2 solid;"><label for="type2">问询</label><input
						type="radio" name="incidentType" value="反馈" id="type3"
						style="border:1px #93BEE2 solid;"><label for="type3">反馈</label>
						<input type="radio" name="incidentType" value="需求" id="type4"
						style="border:1px #93BEE2 solid;"><label for="type4">需求</label>
					</td>
				</tr>


			<%--  <tr style="">
				<td class="td1">类型：</td>
				<td class="td2" colspan="3"> <input type="text" style="display:none"
						id="icdCategoryId" name="icdCategoryId"/> <isperp:treeSelector width="500"
						displayColumn="name" displayValueCssStyle="width:249px"
						url="incident/category/getTree"
						
						id="icdCategorySelector"
						
						name="icdCategoryName" displayValue="${model.icdCategoryName }"
						valueControlId="icdCategoryId" displayValueCssClass="required" ></isperp:treeSelector>
				</td>
			</tr>  --%>


				<tr>
					<td class="td1"><label>标题：</label></td>
					<td class="td2"><input id="title" type="text" name="title" value="${model.title }"
						maxlength="200" style="width:80%" placeholder="请输入故障标题"
						data-valid="故障标题" class="required"><span
						class="required-tip"><font color="red"> * </font><font
							color="blue">必填 </font> </span>
					</td>
				</tr>
				<tr>
					<td class="td1"><label for="textarea">事件描述：</label></td>
					<td class="td2"><textarea cols="40" rows="5"
							name="description" id="description"
							title="事件描述请从“系统+对象+描述”3方面描述。示例：投资预算的重财报表打印错乱。电脑显示不亮；打印机卡纸描述不清楚时，请“添加附件”"
							placeholder="事件描述请从“系统+对象+现象”3方面描述。示例：AO系统报表打印错乱。电脑显示不亮；打印机卡纸描述不清楚时，请“添加附件”">${model.description }</textarea>
					</td>
				</tr>

				<%-- <tr>
					<td class="td1"><label>附件：</label>
					</td>
					<td class="td2"><isperp:uploader sourceId="${id }"
							id="incidentFile"></isperp:uploader></td>
				</tr> --%>

				<tr>
					<td class="td1"><label>附件：</label>
					</td>
					<td class="td2">
						<div id="filelist"></div>
						<div id="container">
							<a id="pickfiles" class="nui-txt-link" href="javascript:;">添加附件</a>
						</div>
						<p class="info-txt">支持格式：jpg,gif,png,jpeg,txt,doc,docx,xls,xlsx,ppt,pptx,pdf,zip,rar&nbsp;大小：10M</p>
					</td>
				</tr>
				<tr>
					<td class="td1">发生时间：</td>
					<td class="td2"><input name="happenTime"
						onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"
						value="${model.happenTime }" type="text" class="datetime Wdate"
						data-valid="发生时间" style="width:180px"></td>
				</tr>
				<tr>
					<td class="td1">期望完成时间：</td>
					<td class="td2"><input name="expectTime"
						onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"
						value="${model.expectTime }" type="text" class="datetime Wdate"
						data-valid="期望完成时间" style="width:180px"></td>
				</tr>

				<tr>
					<td class="td1">发生频率：</td>
					<td class="td2"><isperp:dictSelector
							typeCode="OCCURRENCE_FREQUENCY" id="occurrenceFrequency"
							name="occurrenceFrequency" hasEmptyValue="false"
							dataWidth="250px" dictCssClass="widtha"
							selectedValue="${model.occurrenceFrequency }"></isperp:dictSelector>
					</td>

				</tr>

				<tr style="display:none">
					<td class="td2" colspan="4">
						<h3>&nbsp;&nbsp;2.填写关联设备信息</h3></td>
				</tr>

				<tr style="display:none">
					<td></td>
					<td class="td2" colspan="3">
					
					<input type="radio"
						style="border:1px #93BEE2 solid;" name="relateCiType"
						onclick="choserelateCiType(1)" value="1" id="cirtype2"
						checked="checked"><label for="cirtype2">申报人关联的资产</label>
						
						<input
						type="radio" name="relateCiType" onchange="" value="2"
						id="cirtype1" style="border:1px #93BEE2 solid;"
						onclick="choserelateCiType(2)"><label for="cirtype1">按设备序列号查找</label>
					</td>
				</tr>



				<tr class="isRelateCI" style="display:none">
					<td class="td1"><label id="ciInputTitle" for="textarea">关联的设备：</label>
					</td>
					<td class="td2">
					<%-- <select id="cilist" style="width:211px;"
						name="ciId">
							<option value=""></option>
							<c:forEach items="${userCis }" var="ci">
								<option value="${ci.id }" title="${ci.name }">【${ci.code
									}】${ci.name }</option>
							</c:forEach>
						</select> --%> 
						<!--  <input type="text" id="otherCi" name="otherCi"
						placeholder="请输入资产序列号" title="请输入资产序列号"
						style="width:198px;" /> -->
						
                        <input type="text" id="inputAssetCode" name="inputAssetCode" style="display:none">
                        <input type="text" id="ciId" name="ciId" style="display:none">
						<isperp:listSelector 
						autocomplete="true" id="speSelector" inputPlaceholder="请输入资产序列号"
						afterSelectEmpty="selectCierrTips()" displayColumn="assetCode" name="otherCiAccetCode"
						autocompleteDisplay="'【'+item.data['assetCode']+'】'+item.data['name']"
						autocompleteUrl="configuration/ci/autocompletelist" afterSelected="selectCiSuccess()"
						valueColumn="id" valueControlId="ciId" displayValue="${model.ciCode }"
						displayValueCssStyle="width:242px" displayValueCssClass="">
					    </isperp:listSelector>

						</td>
				</tr>



				<tr>
					<td class="td2" colspan="4">
						<h3>&nbsp;&nbsp;2.填写联系信息</h3></td>
				</tr>

				<!-- <tr>
					<td></td>
					<td class="td2" colspan="3"><input type="radio"
						style="border:1px #93BEE2 solid;" name="choseLinkMan"
						onclick="choseLinkType(1)" value="1" id="req1" checked="checked"><label
						for="req1">申报人</label><input type="radio"
						style="border:1px #93BEE2 solid;" name="choseLinkMan" onchange=""
						value="2" id="req2" onclick="choseLinkType(2)"><label
						for="req2">其他（如非本人的事件单，请选择其他）</label>
					</td>
				</tr> -->
				
				<tr>
					<td class="td1"><label>联系人：</label></td>
					<td class="td2"><input id="linkmanName" type="text"
						value="${model.linkmanName }" tvalue=""
						name="linkmanName" maxlength="200" style="width:180px" placeholder="请输入姓名"
						placeholder="" data-valid="联系人" class="required"><span
						class="required-tip"><font color="red">*</font><font
							color="blue">必填 </font> </span></td>
				</tr>
				
				<tr>
					<td class="td1">手机：</td>
					<td class="td2"><input id="userMobile" type="text"
						name="userMobile" value="" maxlength="200"
						tvalue="${user.mobile}" style="width:180px" placeholder="请输入手机号码"
						data-valid="手机" class="required number"><span id="span_mobile"
						class="required-tip"><font color="red">*</font><font
							color="blue">必填 </font> </span>
					</td>
				</tr>

				<tr>
					<td class="td1">电话：</td>
					<td class="td2"><input id="userTel" type="text" name="userTel"
						value="" maxlength="20" tvalue="${user.tel}"
						style="width:180px" placeholder="请输入电话" data-valid="电话" class="">
					</td>
				</tr>
				
				<tr>
					<td class="td1">Email：</td>
					<td class="td2"><input id="userEmail" type="text"
						name="userEmail" value="" maxlength="200"
						tvalue="${user.email}" style="width:180px"
						placeholder="请填写您的Email" data-valid="Email" class=""><span
						class="">
					</td>
				</tr>

				<tr>
					<td colspan="2" id="incidentItemsTr" style="padding:0;border:none">
						<table id="incidentItems" class="form-table"></table>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center;padding:10px"><input
						id="newIncidentFormSubmit" class="nui-mainbtn BUTTON SUBMIT"
						type="button" onclick="javascript:return submitNewIncident();"
						value="提交申请"><span id="newIncidentFormSubmiting"
						style="display:none;color:red;font-size:14px">正在提交，请稍候......</span>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>

<div class="box n-box fr"
	style="clear:none;width:252px;position: absolute;top:145px;right:30px">

	<div class="box n-box" style="margin-top:5px;border:1px solid #d5d6d7;">

		<div class="header">
			<h2>相关解决方案</h2>
		</div>
		<ul class="lists" id="searchsimilerKnow" style="height:352px">

		</ul>
	</div>

</div>

<script type="text/javascript">

$(function(){
  var tempUserName=$.cookie('the_username');
  var tempUserMobile=$.cookie('the_mobile');
  $("#linkmanName").val(tempUserName);
  $("#userMobile").val(tempUserMobile);

});

  $("#title").change(function() {
		var title = $("#title").val();
		//var projectId = $("#incidentProjectId").val();
		if (title) {
			$.getJSON("customer/help/incident/searchSimilarKnowByTitle?title=" + title, function(data) {
				var listr_similerkonw = "";
				for ( var i = 0; i < data.content.length; i++) {
					var id = data.content[i].id;
					var title = data.content[i].title;

					listr_similerkonw += "<li class='nui-txt-link'><a target='_blank' href='customer/help/knowledge/knowledgeInfo?id=" + id + "'>";
					listr_similerkonw += "" + title + "</a></li>";
				}
				$("#searchsimilerKnow").html("");
				$("#searchsimilerKnow").append($(listr_similerkonw));
			});
		} else {
			$("#searchsimilerKnow").html("");
		}
	});


   function selectCierrTips()
   {
      alert("输入序列号对应设备不存在,请联系服务台");
      $("#speSelector").val("");
      // $("#inputAssetCode").val("0");
   }
   function selectCiSuccess()
   {
      $("#inputAssetCode").val("1");
   }
   function changeIcdCategory(icdCategoryId)
   {
     $("#icdCategoryId").val(icdCategoryId);
   }
   function clearIcdCategory() {
		$("#icdCategoryId").val("");
		$("#icdCategorySelector").val("");
	}
	function setAddressId(ids) {
		$("#AddressSelector").val("");
		$("#addressId").val(ids);
	}
	function setAddressId1(ids, names) {
		$("#addressDetailId").val(ids);
	}

	function choseLinkType(t) {
		if (t == "1") {
			var tvalue = $("#linkmanName").attr("tvalue");
			$("#linkmanName").val(tvalue);

			var tvalue = $("#userTel").attr("tvalue");
			$("#userTel").val(tvalue);
			var tvalue = $("#userMobile").attr("tvalue");
			$("#userMobile").val(tvalue);
			var tvalue = $("#userEmail").attr("tvalue");
			$("#userEmail").val(tvalue);
			$("#span_mobile").show();
			$("#userMobile").addClass("required");
		} else {
			$("#linkmanName").val("");

			$("#userMobile").val("");
			$("#userEmail").val("");
			$("#userTel").val("");

			$("#userMobile").removeClass("required");
		}
	}
	function clear1() {
		alert("输入的位置不存在，请重新输入");
		$("#AddressSelector").val("");
		$("#addressDetailId").val("");
	}

	function selectAddress(lv) {
		var pId = $("#addressLv" + lv).val();
		// alert(pId);
		if (lv == 1) {
			$("#addressLv2").empty();
			$("#addressLv3").empty();
			$("#addressLv2").hide();
			$("#addressLv3").hide();
		} else if (lv == 2) {
			$("#addressLv3").empty();
			$("#addressLv3").hide();
		}
		if (pId == "" || pId == undefined)
			return false;
		$.getJSON("incident/address/getListByParentId?parentId=" + pId, function(data) {
			var ch = data;

			if (ch != undefined) {
				var ch_leg = ch.length;
				var opStr = "<option value=''></option>";
				for ( var i = 0; i < ch_leg; i++) {
					opStr += "<option value='"+ch[i].id+"'>" + ch[i].name + "</option>";
				}
				$("#addressLv" + (lv + 1)).append(opStr);
			}

			if (lv == 1) {
				$("#addressLv2").show();
				$("#addressLv3").hide();
			} else if (lv == 2) {
				$("#addressLv3").show();
			}

		});

	}

	function choserelateCiType(v) {
		if (v == 1) {
			$("#cilist").attr("disabled", false);
			$("#cilist").show();
			$("#otherCi").hide();
			
			$("#ciInputTitle").html("关联资产：");
		} else {
			$("#cilist").attr("disabled", "disabled");
			$("#cilist").hide();
			$("#otherCi").show();

			$("#ciInputTitle").html("资产序列号：")
		}
	}

	var addfile = false;
	function viewincident(icdId) {
		window.href = "incidentDispaly?id=" + icdId;
	}
	function submitNewIncident() {
		var titleVal = $("#title").val();
		var descriptionVal = $("#description").val();

		var validReult = true;
		var message = "";
		var telLength = $("#userTel").val().length;
		var mobileLength = $("#userMobile").val().length;
		
		
		var ciType=$("input[name='relateCiType']:checked").val();
		
		var ciId=null;
		if(ciType==1){
			ciId=$("#cilist").val();
		}else{
			ciId=$("otherCI").val();
		}
		
		/* if(!ciId){
			message+="请填写：关联设备信息\n";
			validReult=false;
		} */
		 
		
		$("form .required").each(function(index, item) {
			var me = $(item);
			var t = me.is("input:checkbox") || me.is("input:radio"), tValue = "";
			if (t) {
				var tName = me.attr("name");
				tValue = me.find("input[name='" + tName + "']:checked").val();
			} else {
				tValue = me.val();
			}

			 if ((tValue == "" || tValue == undefined)) {

				message += "请填写：" + (me.data("valid")) + "\n";
				validReult = false;

			} 
		});

		if (!validReult) {
			alert(message);
			return false;
		}

		if (mobileLength<6 || mobileLength>12) {
			alert("手机号码有误！");
			return false;
		}
		$("#newIncidentFormSubmit").hide();
		$("#newIncidentFormSubmiting").show();
		if (addfile) {
			$(".ufp").html("0%");
			uploader.start();
		} else {
			doSubmit();
		}
		return false;
	}
	
	function saveCookies()
	{
	   var tempName=$("#linkmanName").val();
	   var tempMobile=$("#userMobile").val();
	   $.cookie('the_username', tempName, { expires: 30 });
	   $.cookie('the_mobile', tempMobile, { expires: 30 });
	}

	function doSubmit() {
	    saveCookies();
		$("#newIncidentForm").submit();
	}
</script>
<jsp:include page="../common/uploader.jsp"></jsp:include>
<jsp:include page="../common/bottom.jsp"></jsp:include>
